<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>练习6</title>
  <script src="../js/jquery-3.7.1.min.js"></script>
  <script type="text/javascript">
    $(function () {
      function deleteUser($a) {
        $a.parent().parent().remove();
        return false;
      }
      $("a").click(function () {
        return deleteUser($(this));
      })
      $("#addUser").click(function () {
        var name = $("#name").val();
        var email = $("#email").val();
        var tel = $("#tel").val();
        var $name = $("<td>" + name + "</td>");
        var $email = $("<td>" + email + "</td>");
        var $tel = $("<td>" + tel + "</td>");
        var $del_td = $("<td></td>");
        var $a = $("<a>Delete</a>");
        $a.attr("id", name);
        $a.attr("href", "deleteEmp?id=" + name);
        $a.click(function () {
          return deleteUser($(this));
        })
        $del_td.append($a);
        var $tr = $("<tr></tr>");
        $tr.append($name);
        $tr.append($email);
        $tr.append($tel);
        $tr.append($del_td);
        $("#userTable tbody").append($tr);
      })
    })
  </script>
</head>
<body>
<center>
  <br><br>
  添加用户:<br><br>
  姓名: <input type="text" name="name" id="name"/>&nbsp;&nbsp;
  email: <input type="text" name="email" id="email"/>&nbsp;&nbsp;
  电话: <input type="text" name="tel" id="tel"/><br><br>
  <button id="addUser">提交</button>
  <br><br>
  <hr>
  <br><br>
  <table id="userTable" border="1" cellpadding="5" cellspacing=0>
    <tbody>
    <tr>
      <th>姓名</th>
      <th>email</th>
      <th>电话</th>
      <th>&nbsp;</th>
    </tr>
    <tr>
      <td>Tom</td>
      <td>tom@tom.com</td>
      <td>5000</td>
      <td><a id="Tom" href="deleteEmp?id=Tom">Delete</a></td>
    </tr>
    <tr>
      <td>Jerry</td>
      <td>jerry@sohu.com</td>
      <td>8000</td>
      <td><a id="Jerry" href="deleteEmp?id=Jerry">Delete</a></td>
    </tr>
    </tbody>
  </table>
</center>
</body>
</html>
